<template>
  <div>
    <el-dialog
      :title="form.id ? '修改部门' : '添加员工'"
      :visible.sync="visible"
      width="70%"
      :before-close="handleClose"
      :destroy-on-close="true"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="门店名称" label-width="120px">
          <div style="width: 70%;">
            <el-input v-model="form.companyName" disabled size="small" />
          </div>
        </el-form-item>
        <el-form-item label="部门名称" prop="name" label-width="120px">
          <div style="width: 70%;">
            <el-input v-model="form.deptName" disabled size="small" />
          </div>
        </el-form-item>

        <el-form-item label="员工选择" prop="userId" :rules="{ required: true, message: '部门名称不能为空'}" label-width="120px">
          <div style="width: 70%;">
            <el-select
              v-model="form.userId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="selectLoading"
              style="width: 70%;"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button :loading="loading" type="primary" @click="onSubmit">{{ form.id ? '立即添加' : '立即创建' }}</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Object,
      default: () => ({})
    },
    id: Number
  },
  data() {
    return {
      form: {},
      tableData: [],
      searchFormData: {},
      loading: false,
      selectLoading: false,
      options: []
    }
  },
  watch: {
    defaultValue(val, val2) {
      this.form = val
    }
  },

  methods: {
    handleClose() {
      this.$emit('close')
    },

    /** 请求 */
    remoteMethod(val) {
      this.selectLoading = true
      request({ url: '/system/consumer/select', method: 'get', params: { keyword: val }}).then(res => {
        console.log(res)
        this.options = res.data.map(item => ({ label: item.userName, value: item.id }))
        this.selectLoading = false
      })
    },

    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const p = {
            companyId: this.form.companyId,
            userId: this.form.userId,
            deptId: this.form.deptId
          }
          this.request(p)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async request(params) {
      try {
        this.loading = true
        await request({
          url: 'system/company-user/add',
          method: 'post',
          data: params
        })
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.$emit('add-success')
            this.$refs['form'].resetFields()
          }
        })
      } catch (error) {
        this.$message({
          message: error,
          type: 'warning'
        })
      } finally {
        this.loading = false
      }
      //
    }
  }
}
</script>
